import React,{ lazy,Suspense } from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import { Spin } from 'antd';
import { connect } from 'react-redux';
import Css from '../../../assets/css/home/main/index.css';
import '../../../assets/css/common/public.css';
const IndexPage = lazy(() => import("../typhoon/index"));
const RadarPage = lazy(() => import("../radar/index"));
const SatePage = lazy(() => import("../sate/index"));
const CloudPage = lazy(() => import("../cloud/index"));

class Index extends React.Component {
    constructor(){
        super();
        this.state = {
            typhoonStyle: true,
            radarStyle: false,
            sateStyle: false,
            cloudStyle: false,
            size: 'large'
        }
    }
    
    componentDidMount() {
        this.setTopNavStyle(this.props.location.pathname);
    }

    UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
        //props属性改变执行该方法
        this.setTopNavStyle(nextProps.location.pathname);
    }

    componentWillUnmount(){
        //页面卸载时，重写setState,避免内存溢出
        this.setState = (state, callback) => {
            return ;
        }
    }

    //设置导航选中状态
    setTopNavStyle(pathName){
        switch (pathName) {
            case window.base.config.path+"home/index":
                this.setState({ typhoonStyle:true,radarStyle:false,sateStyle:false,cloudStyle:false });
                break;
            case window.base.config.path+"home/radar":
                this.setState({ typhoonStyle:false,radarStyle:true,sateStyle:false,cloudStyle:false });
                break;
            case window.base.config.path+"home/sate":
                this.setState({ typhoonStyle:false,radarStyle:false,sateStyle:true,cloudStyle:false });
                break;
            case window.base.config.path+"home/sate/classify":
                this.setState({ typhoonStyle:false,radarStyle:false,sateStyle:true,cloudStyle:false });
                break;
            case window.base.config.path+"home/cloud":
                this.setState({ typhoonStyle:false,radarStyle:false,sateStyle:false,cloudStyle:true });
                break;
            default:
                this.setState({ typhoonStyle:true,radarStyle:false,sateStyle:false,cloudStyle:false });
                break;
        }
    }

    //页面跳转
    goPage(url){
        this.props.history.push(window.base.config.path+url);
    }

    render() {
        const { typhoonStyle, radarStyle, sateStyle, cloudStyle, size } = this.state;
        const { spinning } = this.props.spin;
        return (
            <div>
                <div className="load"><Spin size={size} tip='Loading...' spinning={spinning} /></div>
                <div className={Css['top-nav']}>
                    <ul className={typhoonStyle ? 'ulnone '+Css['typhoon']+' '+Css['active'] : 'ulnone '+Css['typhoon']} onClick={() => this.goPage('home/index')}>
                        <li></li>
                        <li>台风</li>
                    </ul>
                    <ul className={radarStyle ? 'ulnone '+Css['radar']+' '+Css['active'] : 'ulnone '+Css['radar']} onClick={() => this.goPage('home/radar')}>
                        <li></li>
                        <li>雷达</li>
                    </ul>
                    <div className={Css['title']}>
                        <div className={Css['text']}>福建省气象三维产品平台</div>
                    </div>
                    <ul className={sateStyle ? 'ulnone '+Css['sate']+' '+Css['active'] : 'ulnone '+Css['sate']} onClick={() => this.goPage('home/sate')}>
                        <li></li>
                        <li>卫星</li>
                    </ul>
                    <ul className={cloudStyle ? 'ulnone '+Css['cloud']+' '+Css['active'] : 'ulnone '+Css['cloud']} onClick={() => this.goPage('home/cloud')}>
                        <li></li>
                        <li>云图</li>
                    </ul>
                </div>
                <div>
                    <Suspense fallback={<React.Fragment/>}>
                        <Switch>
                            <Route path={window.base.config.path+"home/index"} component={IndexPage}></Route>
                            <Route path={window.base.config.path+"home/radar"} component={RadarPage}></Route>
                            <Route path={window.base.config.path+"home/sate"} component={SatePage}></Route>
                            <Route path={window.base.config.path+"home/cloud"} component={CloudPage}></Route>
                            <Redirect to={window.base.config.path+"home/index"}></Redirect>
                        </Switch>
                    </Suspense>
                </div>
            </div>
        )
    }
}

export default connect((store) => {
    return store;
})(Index);